var dataList = [],
	shareItems = [],
	sharePopup = null;

$(() => {
	shareItems = getShareList().data;
	initTags();
	loadData();
	initListener();
})

initListener = () => {
	$("#loading_layout").on('click', (e) => {
		loadData();
	});
}

initTags = () => {
	const tags = new Tag({
		data: getTagsData(),
		container: '#tags',
		onChange: res => {
			loadData();
		}
	})
}

loadData = () => {
	setLoadingState(0);
	$("#list").html('');
	setTimeout(() => {
		let res = getCollectList();
		setLoadingState(1);
		if (res.code == 200) {
			renderList(res.data);
		} else {
			setLoadingState(2);
		}
	}, 500)
}

renderList = (mList) => {
	dataList = mList;
	$("#list").html('');
	if (ArrayEmpty(mList)) return setLoadingState(2, noData());

	let html = '';
	mList.forEach(item => {

		let badge = '';
		if (item.discount) {
			badge = `<span class="item-badge">降价</span>`;
		} else if (item.soldOut) {
			badge = `<span class="item-badge" style="background: var(--dark);">售罄</span>`;
		}

		let originalPrice = '';
		if (item.originalPrice) {
			originalPrice =
				`<span style="text-decoration: line-through; color: #999; font-size: 0.8rem; margin-left: 0.5rem;">${item.originalPrice}</span>`;
		}

		html += `<div class="collection-item" data-id="${item.id}" onclick="getItem('${item.id}')">
					${badge}
					<img src="${item.image}" alt="${item.title}" class="item-image">
					<div class="item-info">
						<h3 class="item-title">${item.title}</h3>
						<div class="item-price">${item.price}${originalPrice}</div>
						<div class="item-meta">
							<span>收藏于 ${item.date}</span>
							<div class="item-actions">
								<button class="action-btn" onclick="onShare(${item.id})"><i class="far fa-share-square"></i></button>
								<button class="action-btn remove-btn" data-id="${item.id}" onclick="toggleFavorite(${item.id})"><i class="far fa-trash-alt"></i></button>
							</div>
						</div>
					</div>
				</div>`;
	});
	$("#list").html(html);
}

getItem = id => {
	navigateTo(`page/goods/details.html?id=${id}`)
}

// 切换收藏状态
toggleFavorite = (id) => {
	event.stopPropagation();
	const index = dataList.findIndex(item => item.id === id);
	if (index !== -1) {
		dataList.splice(index, 1);
		renderList(dataList);
		showToast('取消收藏成功！');
	}
}

onShare = id => {
	event.stopPropagation();
	//底部对话框
	sharePopup = layer.open({
		type: 1,
		content: getShareContent(),
		anim: 'up',
		style: 'position:fixed; bottom:0; left:0; width: 100%; height: auto; padding:10px 0; border:none;border-top-left-radius:10px;border-top-right-radius:10px;'
	});
}

getShareContent = () => {
	let shareHtml = shareItems.map(item => (
		`<div class="share-item" onclick="onClickShareItem('${item.id}')">
						<i class="${item.icon}" style="font-size: 3.6rem;"></i>
						<span class="label">${item.name}</span>
					</div>`)).join('')

	return `<div class="share-box">
				<section class="share-content">
					${shareHtml}
				</section>
				<button class="share-cancel" onclick="cancelShare()">取消</button>
			</div>`
}

onClickShareItem = id => {
	showToast('分享成功');
	cancelShare();
}

cancelShare = () => {
	layer.close(sharePopup)
}
